<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由基础</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .red {
            color: red;
        }
        ul a{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>Hello App</h1>
    <p>
        <router-link to="/foo">div Go to Foo</router-link>
        |
        <router-link to="/foo/append">Foo append</router-link>
        |
        <!--<router-link :to="{ path: 'append'}" append>Foo append</router-link>-->
        <router-link :to="{ path: 'append', append : true}" append>Foo append</router-link>
        |
        <router-link to="/replace" replace>replace</router-link>
        <!--<router-link :to="{path : '/replace', replace: true }>replace</router-link>-->
        |
        <router-link to="/bar" tag="div">Go to bar</router-link>
        |
        <router-link to="/class" active-class="red">Go to class</router-link>
    </p>

    <router-view></router-view>
    <fieldset>
        <legend>循环路由</legend>
        动态路由，只能使用绑定属性  v-bind:to 或者:to
        <ul>
            <router-link v-for="n in 10" :to="{path : '/foo/a' + n}">
                <li>{{n}}</li>
            </router-link>
        </ul>
    </fieldset>
</div>

<script>
    const Replace = {template: '<div>replace 无法 返回上一页</div>'}
    const Append = {template: '<div>append</div>'}
    const Foo = {
        template: '<div> <h2>Foo</h2><router-view></router-view></div>', beforeRouteUpdate(to, from, next) {
            next()
        }
    }
    const Bar = {template: '<div>bar</div>'}
    const Class = {template: '<div>class</div>'}
    const Default = {template: '<div>default</div>'}

    const routes = [
        {
            path: '/replace',
            component: Replace
        },
        {
            path: '/foo',
            component: Foo,
            children: [
                {
                    path: 'append',
                    component: Append
                },
                {
                    path: '', component: Default
                }
            ]
        },
        {path: '/bar', component: Bar},
        {path: '/class', component: Class}
    ]

    const router = new VueRouter({
        routes  //缩写，相当于 routers : routers
    });

    const app = new Vue({
        router
    }).$mount("#app");
</script>
</body>
</html>
